{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/social-buttons/social-buttons.css') }}" rel="stylesheet" type="text/css" media="all" />
	<style type="text/css">
		/* Dashboard Chat */
		
		 .chat {
		    margin: 0;
		    padding: 0;
		    list-style: none;
		}
		
		.chat li {
		    margin-bottom: 10px;
		    padding-bottom: 5px;
		    border-bottom: 1px dotted #B3A9A9;
		}
		
		.chat li.left .chat-body {
		    margin-left: 60px;
		}
		
		.chat li.right .chat-body {
		    margin-right: 60px;
		}
		
		.chat li .chat-body p {
		    margin: 0;
		    color: #777777;
		}
		.chat-panel .panel-body {
		    height: 350px;
		    overflow-y: scroll;
		}
		.container .panel-body .text-muted{
		    margin:0px;
		}
	</style>
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Chat BCORE</h1>
        </div>
        <div class="row">
        	<div class="col-md-6">
                        <div class="chat-panel panel panel-primary">
                            <div class="panel-heading">
                                <i class="fa fa-comments fa-fw"></i> Chat
	                            <div class="btn-group pull-right">
	                                <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
	                                    <i class="fa fa-chevron-down"></i>
	                                </button>
	                                <ul class="dropdown-menu slidedown">
	                                    <li>
	                                        <a href="#">
	                                            <i class="fa fa-refresh fa-fw"></i> Refresh
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a href="#">
	                                            <i class="fa fa-comment fa-fw"></i> Available
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a href="#">
	                                            <i class="fa fa-clock-o fa-fw"></i> Busy
	                                        </a>
	                                    </li>
	                                    <li>
	                                        <a href="#">
	                                            <i class="fa fa-tint fa-fw"></i> Away
	                                        </a>
	                                    </li>
	                                    <li class="divider"></li>
	                                    <li>
	                                        <a href="#">
	                                            <i class="fa fa-sign-out fa-fw"></i> Sign Out
	                                        </a>
	                                    </li>
	                                </ul>
	                            </div>
                            </div>

                            <div class="panel-body">
                                <ul class="chat">
                                    <li class="left clearfix">
                                        <span class="chat-img pull-left">
                                            <img src="{{ asset('bundles/applicationbootstrap/images/50x50_b.png') }}" alt="User Avatar" class="img-circle" />
                                        </span>
                                        <div class="chat-body clearfix">
                                            <div class="header">
                                                <strong class="primary-font"> Jack Sparrow </strong>
                                                <small class="pull-right text-muted">
                                                    <i class="fa fa-clock-o fa-fw"></i> 12 mins ago
                                                </small>
                                            </div>
                                             <br />
                                            <p>
                                                Lorem ipsum dolor sit amet, bibendum ornare dolor, quis ullamcorper ligula sodales.
                                            </p>
                                        </div>
                                    </li>
                                    <li class="right clearfix">
                                        <span class="chat-img pull-right">
                                            <img src="{{ asset('bundles/applicationbootstrap/images/50x50_r.png') }}" alt="User Avatar" class="img-circle" />
                                        </span>
                                        <div class="chat-body clearfix">
                                            <div class="header">
                                                <small class=" text-muted">
                                                    <i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small>
                                                <strong class="pull-right primary-font"> Jhony Deen</strong>
                                            </div>
                                            <br />
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur a dolor, quis ullamcorper ligula sodales.
                                            </p>
                                        </div>
                                    </li>
                                    <li class="left clearfix">
                                        <span class="chat-img pull-left">
                                            <img src="{{ asset('bundles/applicationbootstrap/images/50x50_b.png') }}" alt="User Avatar" class="img-circle" />
                                        </span>
                                        <div class="chat-body clearfix">
                                            <div class="header">
                                                <strong class="primary-font"> Jack Sparrow </strong>
                                                <small class="pull-right text-muted">
                                                    <i class="fa fa-clock-o fa-fw"></i> 12 mins ago
                                                </small>
                                            </div>
                                             <br />
                                            <p>
                                                Lorem ipsum dolor sit amet, bibendum ornare dolor, quis ullamcorper ligula sodales.
                                            </p>
                                        </div>
                                    </li>
                                    <li class="right clearfix">
                                        <span class="chat-img pull-right">
                                            <img src="{{ asset('bundles/applicationbootstrap/images/50x50_r.png') }}" alt="User Avatar" class="img-circle" />
                                        </span>
                                        <div class="chat-body clearfix">
                                            <div class="header">
                                                <small class=" text-muted">
                                                    <i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small>
                                                <strong class="pull-right primary-font"> Jhony Deen</strong>
                                            </div>
                                            <br />
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetur a dolor, quis ullamcorper ligula sodales.
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                            <div class="panel-footer">
                                <div class="input-group">
                                    <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                                    <span class="input-group-btn">
                                        <button class="btn btn-warning btn-sm" id="btn-chat">Send</button>
                                    </span>
                                </div>
                            </div>

                        </div>
        	</div>
        	<div class="col-md-6">
        	
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <i class="fa fa-bell fa-fw"></i> Notifications Alerts Panel
                        </div>

                        <div class="panel-body">
                            <div class="list-group">
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-comment fa-fw"></i> New Comment
                                        <span class="pull-right text-muted small"><em> 4 minutes ago</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                        <span class="pull-right text-muted small"><em> 12 minutes ago</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-envelope fa-fw"></i> Message Sent
                                        <span class="pull-right text-muted small"><em> 27 minutes ago</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-tasks fa-fw"></i> New Task
                                        <span class="pull-right text-muted small"><em>43 minutes ago</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                        <span class="pull-right text-muted small"><em>11:32 AM</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-warning fa-fw"></i> Server Crashed!
                                        <span class="pull-right text-muted small"><em>11:13 AM</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-check fa-fw"></i> New Order Placed
                                        <span class="pull-right text-muted small"><em>9:49 AM</em></span>
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="fa fa-money fa-fw"></i> Payment Received
                                        <span class="pull-right text-muted small"><em>Yesterday</em></span>
                                    </a>
                            </div>

                            <a href="#" class="btn btn-default btn-block btn-primary">View All Alerts</a>
                        </div>

                    </div>
                        
        	</div>
        </div>
        <div class="page-header">
            <h3>Social Buttons</h3>
        </div>
        <div class="row">
        	<div class="col-md-4">
        	    <a class="btn btn-block btn-social btn-facebook" href="#"><i class="fa fa-facebook"></i> Sign in with Facebook</a>
        	    <a class="btn btn-block btn-social btn-twitter" href="#"><i class="fa fa-twitter"></i> Sign in with Twitter</a>
        	    <a class="btn btn-block btn-social btn-google-plus" href="#"><i class="fa fa-google-plus"></i> Sign in with Google</a>
        	    <a class="btn btn-block btn-social btn-github" href="#"><i class="fa fa-github"></i> Sign in with GitHub</a>
        	</div>
        	<div class="col-md-4">
        	    <a class="btn btn-block btn-social btn-pinterest" href="#"><i class="fa fa-pinterest"></i> Sign in with Pinterest</a>
        	    <a class="btn btn-block btn-social btn-dropbox" href="#"><i class="fa fa-dropbox"></i> Sign in with Dropbox</a>
        	    <a class="btn btn-block btn-social btn-linkedin" href="#"><i class="fa fa-linkedin"></i> Sign in with LinkedIn</a>
        	    <a class="btn btn-block btn-social btn-instagram" href="#"><i class="fa fa-instagram"></i> Sign in with Instagram</a>
        	</div>
        	<div class="col-md-4">
        	    <a class="btn btn-block btn-social btn-bitbucket" href="#"><i class="fa fa-bitbucket"></i> Sign in with Bitbucket</a>
        	    <a class="btn btn-block btn-social btn-flickr" href="#"><i class="fa fa-flickr"></i> Sign in with Flickr</a>
        	    <a class="btn btn-block btn-social btn-tumblr" href="#"><i class="fa fa-tumblr"></i> Sign in with Tumblr</a>
        	    <a class="btn btn-block btn-social btn-vk" href="#"><i class="fa fa-vk"></i> Sign in with VK</a>
        	</div>
        </div>
    </div> <!-- /container -->
{% endblock %}